<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闯关准备 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 复用练习选择页面的样式 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 导航栏样式 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.95);
      padding: 15px 30px;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-brand {
      font-size: 24px;
      font-weight: bold;
      color: #764ba2;
      display: flex;
      align-items: center;
    }

    .nav-brand i {
      margin-right: 10px;
      font-size: 26px;
    }

    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    /* 按钮样式 */
    .btn {
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
    }

    .btn-outline {
      border: 2px solid #764ba2;
      color: #764ba2;
      background: transparent;
    }

    .btn-primary {
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-success {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-warning {
      background: linear-gradient(135deg, #ffc107, #fd7e14);
      color: white;
      box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .btn-outline:hover {
      background: #764ba2;
      color: white;
    }

    /* 主要内容区域 */
    .main-content {
      background: white;
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      margin-bottom: 30px;
    }

    .welcome-section {
      text-align: center;
      margin-bottom: 40px;
    }

    .welcome-title {
      font-size: 36px;
      color: #333;
      margin-bottom: 15px;
    }

    .welcome-subtitle {
      font-size: 18px;
      color: #666;
      max-width: 600px;
      margin: 0 auto 30px;
      line-height: 1.6;
    }

    /* 当前知识点信息 */
    .current-point-info {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .point-details h2 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .point-meta {
      display: flex;
      gap: 20px;
      font-size: 14px;
      opacity: 0.9;
    }

    /* 模式选择网格 */
    .mode-selection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      gap: 25px;
      margin-top: 40px;
    }

    /* 卡片样式 */
    .mode-card {
      background: white;
      border-radius: 16px;
      padding: 30px 25px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 3px solid transparent;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transform-origin: center;
    }

    .mode-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, var(--mode-color), rgba(var(--mode-color-rgb), 0.7));
      z-index: 2;
    }

    .mode-card:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      border-color: var(--mode-color);
    }

    /* 卡片颜色定义 */
    .mode-card.practice {
      --mode-color: #28a745;
      --mode-color-rgb: 40, 167, 69;
    }

    .mode-card.formal {
      --mode-color: #dc3545;
      --mode-color-rgb: 220, 53, 69;
    }

    .mode-card.recommended {
      border: 3px solid #ffd700;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }

    /* 推荐标签 */
    .recommend-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      background: linear-gradient(135deg, #ffd700, #ff6b00);
      color: white;
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
    }

    /* 卡片内部元素 */
    .mode-icon {
      font-size: 52px;
      margin-bottom: 20px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mode-card h3 {
      margin-bottom: 15px;
      color: #333;
      font-size: 24px;
      font-weight: 700;
    }

    .mode-description {
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
      min-height: 60px;
    }

    .mode-features {
      text-align: left;
      margin-bottom: 25px;
      padding: 18px;
      background: #f8f9fa;
      border-radius: 10px;
      border-left: 4px solid var(--mode-color);
    }

    .mode-features ul {
      list-style: none;
      padding: 0;
    }

    .mode-features li {
      padding: 6px 0;
      color: #555;
      display: flex;
      align-items: center;
    }

    .mode-features li::before {
      content: '✓';
      color: var(--mode-color);
      font-weight: bold;
      margin-right: 10px;
      font-size: 16px;
    }

    .mode-stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 12px;
      background: rgba(var(--mode-color-rgb), 0.1);
      border-radius: 8px;
      font-size: 14px;
    }

    .stat-item {
      text-align: center;
      flex: 1;
    }

    .stat-value {
      font-weight: bold;
      color: var(--mode-color);
      font-size: 18px;
    }

    .stat-label {
      color: #666;
      font-size: 12px;
    }

    /* 难度标签 */
    .mode-difficulty {
      display: inline-block;
      padding: 6px 16px;
      background: var(--mode-color);
      color: white;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .nav-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      .navbar {
        flex-direction: column;
        gap: 15px;
      }

      .mode-selection-grid {
        grid-template-columns: 1fr;
      }

      .point-meta {
        flex-direction: column;
        gap: 10px;
      }

      .mode-card {
        padding: 20px 15px;
      }
    }

    @media (max-width: 480px) {
      .main-content {
        padding: 20px 15px;
      }

      .mode-icon {
        font-size: 36px;
        height: 60px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">
      <i>🚀</i> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <a th:href="@{/practice/choice(pointId=${pointId})}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> 返回模式选择
      </a>
      <a th:href="@{/knowledge/gym}" class="btn btn-outline">
        <i class="fas fa-home"></i> 返回训练馆
      </a>
    </div>
  </nav>

  <!-- 主要内容区域 -->
  <div class="main-content">
    <div class="welcome-section">
      <h1 class="welcome-title">🎯 闯关准备</h1>
      <p class="welcome-subtitle">选择最适合你的闯关方式，通过测验解锁下一个知识点</p>
    </div>

    <!-- 当前知识点信息 -->
    <div class="current-point-info">
      <div class="point-details">
        <h2><span th:text="${point?.title}"></span>当前知识点标题</h2>
        <div class="point-meta">
          <span>难度: <strong th:text="${point?.difficultyLevel}">初级</strong></span>
          <span>预计时间: <strong th:text="${point?.baseDuration}">15分钟</strong></span>
          <span>经验值: <strong th:text="${point?.baseExperience}">100</strong></span>
          <span>类型: <strong th:text="${point?.knowledgeType}">概念理解型</strong></span>
        </div>
      </div>
    </div>

    <!-- 错误提示 -->
    <div th:if="${param.error}" class="error-message" style="background: #f8d7da; color: #721c24; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #dc3545;">
      <i class="fas fa-exclamation-triangle"></i>
      <span th:text="${param.error}">错误信息</span>
    </div>

    <!-- 模式选择网格 -->
    <div class="mode-selection-grid">
      <!-- 练习模式卡片 -->
      <div class="mode-card practice recommended" onclick="selectMode('practice')">
        <div class="recommend-badge">🌟 推荐新手</div>
        <div class="mode-icon">📚</div>
        <div class="mode-difficulty">热身</div>
        <h3>先练习再闯关</h3>
        <p class="mode-description">通过不计分的练习题熟悉知识点，准备好后再开始正式闯关</p>

        <div class="mode-stats">
          <div class="stat-item">
            <div class="stat-value" th:text="${practiceQuestionCount}">5</div>
            <div class="stat-label">练习题</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">不限时</div>
            <div class="stat-label">时间</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">不计分</div>
            <div class="stat-label">成绩</div>
          </div>
        </div>

        <div class="mode-features">
          <ul>
            <li>不限时练习题，无压力学习</li>
            <li>即时反馈和详细解析</li>
            <li>不计入正式成绩</li>
            <li>准备好后随时开始正式闯关</li>
            <li>适合第一次学习或想先热身的用户</li>
          </ul>
        </div>

        <a th:href="@{/practice/gateway/practice(pointId=${pointId})}" class="btn btn-success" style="width: 100%; justify-content: center;">
          <i class="fas fa-play-circle"></i> 开始练习
        </a>
      </div>

      <!-- 正式闯关卡片 -->
      <div class="mode-card formal" onclick="selectMode('formal')">
        <div class="mode-icon">⚡</div>
        <div class="mode-difficulty">挑战</div>
        <h3>直接开始闯关</h3>
        <p class="mode-description">直接进入计分闯关模式，通过后立即解锁下一个知识点</p>

        <div class="mode-stats">
          <div class="stat-item">
            <div class="stat-value" th:text="${formalQuestionCount}">8</div>
            <div class="stat-label">考题</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" th:text="${point?.baseDuration}">15分钟</div>
            <div class="stat-label">限时</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">80%</div>
            <div class="stat-label">及格线</div>
          </div>
        </div>

        <div class="mode-features">
          <ul>
            <li>限时完成，考验真实掌握程度</li>
            <li>通过后立即解锁下一个知识点</li>
            <li>计入学习进度和成绩</li>
            <li>获得完整经验奖励</li>
            <li>适合已经掌握知识点，想要快速验证的用户</li>
          </ul>
        </div>

        <a th:href="@{/practice/gateway/formal(pointId=${pointId})}" class="btn btn-warning" style="width: 100%; justify-content: center;">
          <i class="fas fa-bolt"></i> 直接闯关
        </a>
      </div>
    </div>

    <!-- 模式说明 -->
    <div style="margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
      <h3 style="margin-bottom: 15px; color: #333;">💡 闯关模式说明</h3>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
        <div>
          <strong>📚 练习模式</strong>
          <p style="color: #666; font-size: 14px; margin-top: 5px; line-height: 1.5;">
            建议新手选择此模式。通过不计分的练习题熟悉知识点类型和难度，
            每道题都有详细解析，帮助你真正理解概念。
          </p>
        </div>
        <div>
          <strong>⚡ 正式闯关</strong>
          <p style="color: #666; font-size: 14px; margin-top: 5px; line-height: 1.5;">
            需要达到80%正确率才能通过。通过后立即解锁下一个知识点，
            并获得完整的经验值奖励。
          </p>
        </div>
        <div>
          <strong>🎯 智能推荐</strong>
          <p style="color: #666; font-size: 14px; margin-top: 5px; line-height: 1.5;">
            系统根据你的学习历史推荐练习模式。如果你是第一次学习这个知识点，
            强烈建议先练习再闯关。
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 选择模式函数
  function selectMode(mode) {
    console.log('选择了模式:', mode);

    // 添加视觉反馈
    const cards = document.querySelectorAll('.mode-card');
    cards.forEach(card => card.classList.remove('selected'));

    const selectedCard = document.querySelector(`.mode-card.${mode}`);
    if (selectedCard) {
      selectedCard.classList.add('selected');
    }

    // 如果是移动端，自动滚动到选中的卡片
    if (window.innerWidth <= 768) {
      selectedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }

  // 页面加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    console.log('闯关准备页面加载完成');

    // 根据用户历史推荐模式（这里可以扩展为根据用户学习数据智能推荐）
    // 暂时默认推荐练习模式

    // 添加点击效果
    const cards = document.querySelectorAll('.mode-card');
    cards.forEach(card => {
      card.addEventListener('click', function() {
        cards.forEach(c => c.classList.remove('selected'));
        this.classList.add('selected');
      });
    });
  });

  // 键盘快捷键支持
  document.addEventListener('keydown', function(event) {
    // 1 选择练习模式，2 选择正式模式
    if (event.key === '1') {
      selectMode('practice');
    } else if (event.key === '2') {
      selectMode('formal');
    } else if (event.key === 'Enter') {
      const selectedCard = document.querySelector('.mode-card.selected');
      if (selectedCard) {
        const link = selectedCard.querySelector('a');
        if (link) {
          link.click();
        }
      }
    }
  });
</script>
</body>
</html>